<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
	    .box{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			z-index: 65;
			background-color: #ddd;
		}
	    .top-loading{
			display: block;
			width: 30px;
			height: 30px;
			position: fixed;
			left: 0;
			top: 50px;
			right: 0;
			z-index: 70;
			margin: auto;
			transition: top .4s;
		}
		.release{
			animation: release .8s infinite alternate;
			-webkit-animation: release .8s linear alternate; 
		}
		.totate{
			animation: rotate 1s infinite;
			-webkit-animation: rotate 1s linear; 
		}
		@keyframes release {
			from {
				transform: rotateZ(360deg);
			}
			to {
				transform: rotateZ(0);
			}
		}

		@keyframes rotate {
			from {
				transform: rotateZ(0);
			}
			to {
				transform: rotateZ(360deg);
			}
		}
	</style>
</head>
<body>
	<img class="top-loading" src="./image/huiloading.png" alt="">
	<div class="box"></div>
	<script>
	    var box = document.getElementsByClassName('box')[0];
		var topLoading = document.getElementsByClassName('top-loading')[0];
		var startCation = 0;
        var endCation   = 0;
		window.addEventListener('touchstart', function(e){
			startCation = e.changedTouches[0].clientY;
		}, false);
	    window.addEventListener('touchend',function(e){
			if (endCation - startCation >= 0) {
				topLoading.className = "top-loading release";
				topLoading.style.top = '50px'
				setTimeout(function(){
					topLoading.className = "top-loading totate";
					topLoading.style.top = '50px';
				},800)
				setTimeout(function(){
					stopCation()
				},2800)
			}
		},false)
	    window.addEventListener('touchmove',function(e){
			endCation = e.changedTouches[0].clientY;
			computedCation()
		})
		function computedCation(){
			var xval = endCation - startCation;
			if (xval <= 0){
				return false
			}
			if (xval > 0 && xval < 100) {
				// Math.sqrt(xval); //求根
				topLoading.style.top = xval+50+"px";
				topLoading.style.transform = 'rotateZ('+3.6*xval+'deg)'
			} else if(xval > 0) {
				topLoading.style.top = '150px'
			}
		}
		function stopCation(){
			topLoading.className = 'top-loading';
			topLoading.style.top = '50px';
			topLoading.style.transform = 'rotateZ(0deg)';
			startCation = 0;
            endCation   = 0;
		}   
	</script>  
</body>
</html>